<template>
    <div id="root">
        <div>
            <Top><p>编辑地址</p>
                <template v-slot:right>
                    <span class="right-top" @click="compile()">{{name}}</span>
                </template>
            </Top>
            <div>
                <div v-for="(v,i) in show" :key="i" class="xunh">
                    <div class="xunh-one">
                        <p>{{v.name}}</p>
                        <p>{{v.phone}}</p>
                    </div>
                    <div v-if="msg" class="xunh-two" @click="RM(v,i)">
                        <van-icon name="cross"/>
                    </div>
                </div>
            </div>
            <p class="addshop" @click="AddClick()">新增地址<span
                    class="right"> <van-icon
                    name="arrow"/></span></p>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    import Top from "./Top";

    export default {
        name: "Shipping",
        components: {Top},
        data() {
            return {
                show: "",
                x: "",
                msg: false,
            }
        },
        computed: {
            name() {
                if (this.msg == false) {
                    return '编辑'

                } else {
                    return '完成'
                }
            }
        },
        methods: {
            AddClick() {
                this.$router.push("/myuser/shipping/addshipp")
            },
            compile() {
                // console.log()
                this.msg = !this.msg;

            },
            RM(v, i) {
                console.log(this.show, i)
                this.axios.delete("https://elm.cangdu.org/v1/users/" + v.user_id + "/addresses/" + v.id).then(data => {
                    console.log(data.data)
                    if (data.data.success == "删除地址成功") {
                        this.show.splice(i, 1)
                    }

                }).catch(error => {
                    console.log(error)
                });
            }
        },
        created() {
            this.axios.get("https://elm.cangdu.org/v1/users/" + JSON.parse(localStorage.user).user_id + "/addresses").then(data => {
                this.show = data.data;
            }).catch(error => {
                console.log(error)
            });
        },

        beforeRouteUpdate(to, from, next) {
            // 在当前路由改变，但是该组件被复用时调用
            // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
            // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
            // 可以访问组件实例 \`this\`
            this.axios.get("https://elm.cangdu.org/v1/users/" + JSON.parse(localStorage.user).user_id + "/addresses").then(data => {
                this.show = data.data;
            }).catch(error => {
                console.log(error)
            });
            next();

        }


    }
</script>

<style scoped>
    #root {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        background-color: #f5f5f5;
        /*z-index: 999;*/
    }

    .right-top {
        position: absolute;
        right: 10px;
        top: 0px;
    }

    .right {
        display: inline-block;
        float: right;
    }

    .addshop {
        /*padding-left: 1.6rem;*/
        height: 30px;
        line-height: 30px;
        width: 92%;
        /*background-color: #3190e8;*/
        border-bottom: 1px solid #f1f1f1;
        padding: 0.4rem .266667rem .433333rem 1.6rem;
        font-size: 1rem;
        color: #333;
        background-color: white;
        margin-top: 10px;
    }

    .xunh {
        padding: 10px;
        color: #333;
        font-weight: 400;
        font-family: Microsoft Yahei;
        box-sizing: border-box;
        border-bottom: 1px solid #d9d9d9;
        display: flex;
        justify-content: space-between;
        margin: 9px;
    }

    .xunh-two {
        /*float: right;*/
    }
</style>